<template>
  <div class="login-form">
    <!-- status-icon -->
    <el-form
      ref="ruleFormRef"
      :model="loginForm"
      :rules="rules"
      class="demo-ruleForm"
      label-width="80px"
    >
      <el-form-item label="用户名" prop="userName">
        <el-input
          v-model="loginForm.userName"
          type="text"
          autocomplete="off"
          placeholder="手机号/用户名"
          class="public-input"
        />
      </el-form-item>
      <el-form-item label="密码" prop="passWord">
        <el-input
          v-model="loginForm.passWord"
          type="password"
          autocomplete="off"
          placeholder="PIN"
          class="public-input"
          show-password
        />
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <div class="code-box">
          <el-input v-model="loginForm.code" class="code-input"></el-input>
          <identify-code
            class="coder-box"
            @identifyCode="refreshCode"
            :contentWidth="contentWidth"
            :contentHeight="contentHeight"
          ></identify-code>
        </div>
      </el-form-item>
      <el-form-item label-width="0px">
        <div class="loginBtn">
          <el-button type="primary" @click="loginBtn(ruleFormRef)" round>登录</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import IdentifyCode from '@/components/IdentifyCode.vue'
import { localCache } from '@/utils'

// 图像验证码canvas的宽高
const contentWidth = 120
const contentHeight = 40
const ruleFormRef = ref<FormInstance>()
const loginForm = reactive({
  userName: localCache.getCache('userName') ?? '',
  passWord: localCache.getCache('passWord') ?? '',
  code: ''
})
// 验证规则
function validateUserName(rule: any, value: any, callback: any) {
  if (value === '') {
    callback(new Error('手机号/用户名'))
  } else {
    if (loginForm.userName !== '') {
      if (!ruleFormRef.value) return
    }
    callback()
  }
}
function validatePassWord(rule: any, value: any, callback: any) {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (loginForm.passWord !== '') {
      if (!ruleFormRef.value) return
    }
  }
  callback()
}
function validateCode(rule: any, value: any, callback: any) {
  if (value === '') {
    callback(new Error('请输入验证码'))
  } else if (value.toLowerCase() == identifyCode.value.toLowerCase()) {
    console.log('正确')
    callback()
  } else {
    callback(new Error('验证码错误'))
  }
}
const rules = reactive({
  userName: [{ validator: validateUserName, trigger: 'blur', required: true }],
  passWord: [{ validator: validatePassWord, trigger: 'blur', required: true }],
  code: [{ validator: validateCode, trigger: 'blur', required: true }]
})

// 验证码逻辑
const identifyCode = ref('') //正确的验证码
function refreshCode(code: string) {
  identifyCode.value = code
}
const emit = defineEmits(['submit'])
// 登录按钮
function loginBtn(formEl: FormInstance | undefined) {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      emit('submit', loginForm)
      // 登录逻辑
    } else {
      return false
    }
  })
}
</script>

<style lang="less" scoped>
.login-form {
  .demo-ruleForm {
    /deep/ .el-form-item__label {
      line-height: var(--formHeight);
    }
    .public-input {
      width: 300px;
      height: var(--formHeight);
    }
    .code-box {
      display: flex;
      width: 100%;
      height: var(--formHeight);
      .coder-box {
        cursor: pointer;
      }

      .code-input {
        margin-right: 15px;
        height: v-bind(contentHeight) + 'px';
        width: v-bind(contentWidth) + 'px';
      }
    }
    .loginBtn {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    /deep/.el-button.is-round {
      padding: 15px 30px;
    }
  }
}
</style>
